<template>
  <div class="block" style="font-size:14px;">
    <slot></slot>
    <el-cascader
      v-model="myValue"
      :options="options"
      :placeholder="placeholder"
      :clearable="isClearable"
      :disabled="disabled"
      :show-all-levels="showAllLevels"
      @visible-change="handleChange"
      :props="{
       expandTrigger: 'hover',
       checkStrictly: 'true',
     }"
      size="small"
      filterable
      :style='"width:"+ width'>
    </el-cascader>
  </div>
</template>
<style scoped>
  .block{
    display: inline-block;
  }
</style>
<script>
export default {
  data() {
    return {
      myValue: []
    };
  },
  created() {},
  props: {
    changeEvent: {
      default: ""
    },
    value:{
      default(){
        return []
      }
    },
    options:{
      default: ""
    },
    width:{
      default: ""
    },
    disabled:{
      default:false
    },
    isClearable:{
      default:true
    },
    placeholder:{
      default:'请选择'
    },
    showAllLevels:{
      default:true
    }
  },
 watch:{
   value(val){
     if(val instanceof Array){
       this.myValue = val
     }else{
       this.myValue = [];
     }
   }
 },
  methods: {
    getCascaderObj(val, opt) {
      return val.map(function(value) {
        for (let item of opt) {
          if (item.value == value) {
            opt = item.children;
            return item;
          }
        }
        return null;
      });
    },
    handleChange(val) {
      if(!val){
        //当为条件查询时model是为空的，只有在nextTick后才能查到值
        this.$nextTick(()=>{
          this.$Bus.$emit(this.changeEvent,this.myValue);
        })
      }
    },
  }
};
</script>

